<template>
  <BaseDialog
    v-model="dialogVisible"
    title="订单账单"
    width="850px"
    :before-close="handleClose"
  >
    <el-row
      type="flex"
      justify="space-between"
      class="header-filter four-border-blueBg"
    >
      <div class="row-left">
        <TextInput
          v-model="listParams.orderNo"
          class="item"
          clearable
          placeholder="订单号"
        />
        <BaseSelect
          v-model="listParams.status"
          :options="g_options.routeOrderStatusOptions"
          class="item"
          placeholder="订单状态"
          clearable
        />
        <BaseSelect
          v-model="listParams.occupySeat"
          :options="g_options.placeholderOptions"
          class="item"
          placeholder="占位情况"
          clearable
        />
        <el-button type="primary" @click="handleQuery">{{
          $t('public.search')
        }}</el-button>
        <el-button plain @click="handleReset">{{
          $t('public.reset')
        }}</el-button>
      </div>
      <div class="row-right">
        <el-button type="primary" @click="handleCreate"
          >+ {{ $t('public.create') }}</el-button
        >
      </div>
    </el-row>
    <BaseTable
      v-loading="loading"
      ref="refContentTable"
      :data="tableData"
      row-key="id"
      style="margin: 10px 0"
      :max-height="tableMaxHeight"
    >
      <TableColumn prop="type" label="类型" :column-width="columnWidthObj.type">
        <template #default="{ row }">
          <span>{{ row.type }}</span>
          <!-- <span
            :class="
              g_options.getOptionText(
                g_options.costItemTypeOptions,
                row.type,
                '--'
              )
            "
            >{{
              g_options.getOptionText(
                g_options.costItemTypeOptions,
                row.type,
                '--'
              )
            }}</span
          > -->
        </template>
      </TableColumn>
      <TableColumn
        prop="status"
        label="状态"
        :column-width="columnWidthObj.status"
      >
        <template #default="{ row }">
          <span
            :class="
              g_options.getOptionText(
                g_options.routeOrderStatusOptions,
                row.status,
                '--'
              )
            "
            >{{
              g_options.getOptionText(
                g_options.routeOrderStatusOptions,
                row.status,
                '--'
              )
            }}</span
          >
        </template>
      </TableColumn>
      <TableColumn
        prop="orderNo"
        label="订单号"
        :column-width="columnWidthObj.orderNo"
      />
      <TableColumn
        prop="sale"
        label="销售"
        :column-width="columnWidthObj.sale"
      />
      <TableColumn
        prop="customerName"
        label="客户名称"
        :column-width="columnWidthObj.customerName"
      />
      <TableColumn
        prop="startRegionCode"
        label="出发城市"
        :column-width="columnWidthObj.startRegionCode"
      >
        <template #default="{ row }">
          <span>{{ g_utils.getRegionName(row.startRegionCode) }}</span>
        </template>
      </TableColumn>
      <TableColumn
        prop="occupySeat"
        label="占位"
        :column-width="columnWidthObj.occupySeat"
      >
        <template #default="{ row }">
          <span
            :class="
              g_options.getOptionText(
                g_options.placeholderOptions,
                row.occupySeat,
                '--'
              )
            "
            >{{
              g_options.getOptionText(
                g_options.placeholderOptions,
                row.occupySeat,
                '--'
              )
            }}</span
          >
        </template>
      </TableColumn>
      <TableColumn
        prop="personNum"
        label="人数"
        :column-width="columnWidthObj.personNum"
      />
      <TableColumn
        prop="totalPrice"
        label="总金额"
        :column-width="columnWidthObj.totalPrice"
      />
      <TableColumn
        prop="price"
        label="单价"
        :column-width="columnWidthObj.price"
      />
      <TableColumn
        prop="exRate"
        label="汇率"
        :column-width="columnWidthObj.exRate"
      />
      <TableColumn
        prop="action"
        fixed="right"
        :label="$t('public.action')"
        max-width="220"
        :column-width="columnWidthObj.action"
      >
        <template #default="{ row }">
          <el-button text @click="handleEditDialog(row)">
            {{ $t('public.edit') }}
          </el-button>
          <el-button text @click="handleDelete(row)">
            {{ $t('public.delete') }}
          </el-button>
        </template>
      </TableColumn>
    </BaseTable>
    <BasePagination
      v-model:page-size="pageSize"
      v-model:current-page="pageNum"
      :total="total"
      @change="getTableList()"
    />
    <template #footer>
      <div class="detail-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.close')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>

  <AddOrEditOrderBillDialog
    v-if="addOrEditVisible"
    v-model="addOrEditVisible"
    :type="addOrEditType"
    :id="props.id"
    :row="addOrEditRow"
    @update="handleUpdate"
  />
</template>

<script setup>
import AddOrEditOrderBillDialog from './AddOrEditOrderBillDialog.vue'

const props = defineProps({
  type: {
    type: String,
    default: 'view' // view | confirm
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})

const listParams = ref({
  orderNo: '',
  status: '',
  occupySeat: ''
})
const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const tableMaxHeight = ref(null)
const columnWidthObj = ref({})
const total = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
// 弹框参数
const addOrEditVisible = ref(false)
const addOrEditType = ref('add')
const addOrEditRow = ref({})

onMounted(() => {
  getTableList()
  tableMaxHeight.value = window.innerHeight - 286 + 'px'
  window.onresize = () => {
    return (() => {
      tableMaxHeight.value = window.innerHeight - 286 + 'px'
    })()
  }
})

const getTableList = () => {
  loading.value = true
  tableData.value = []
  g_api.travelAgency
    .apiTeamSeatOrderList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      teamId: props.id,
      ...listParams.value
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data.items
        total.value = data.total
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}

const handleUpdate = _ => {
  handleQuery()
  emit('update')
}

const handleReset = () => {
  Object.assign(listParams.value, {
    orderNo: '',
    status: '',
    occupySeat: ''
  })
  handleQuery()
}

const handleCreate = () => {
  addOrEditVisible.value = true
  addOrEditType.value = 'add'
}

const handleEditDialog = row => {
  addOrEditVisible.value = true
  addOrEditType.value = 'edit'
  addOrEditRow.value = row
}

const handleDelete = row => {
  g_utils
    .deleteConfirm()
    .then(() => {
      loading.value = true
      g_api.travelAgency
        .apiTeamSeatOrderDelete({
          id: row.id
        })
        .then(res => {
          if (res.code === '200') {
            ElMessage.success(res.message)
            handleQuery()
          }
        })
        .finally(() => {
          loading.value = false
        })
    })
    .catch(() => {})
}

const handleClose = () => {
  dialogVisible.value = false
}
</script>

<style scoped lang="scss"></style>
